<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore,usePlayerDrawViewStore} from "@/stores"
import IconView from "@/components/IconView.vue"
import {SongLengthToDateString} from "@/utils/date"
import {ref} from 'vue'
import MusicQueteButtonList from "@/components/Controls/MusicQueteButtonList.vue";
import PlayingIcon from "@/components/icons/PlayingIcon.vue";

const activeId = ref('')

//const emit = defineEmits(['update:closeDrawer'])
const audioStore = useAudioPlayerStore()
const showDrawer = usePlayerDrawViewStore()

// const props = defineProps({
//   Display:{
//     type: Boolean,
//     required: true
//   }
// })


const handelClose = () => {
  //emit('update:closeDrawer')
  showDrawer.show = false
}

const handleDbclick = async (song: song_info) => {

  //设置音乐，参数二传是否立即播放
  await audioStore.setPlayingSong(song,true)
}

</script>

<template>
    <el-drawer
        :model-value="showDrawer.show"
        @close="handelClose"
        :show-close="false"
        :size="300"
    >
      <template #header>
        <h2>播放队列</h2>
        <div class="list-info">
          <div>
            {{ audioStore.songList.length }}首歌曲
          </div>
          <div class="drwaer_btn_list">
            <i>批量</i>
            <i>删除</i>
          </div>
        </div>
      </template>
      <template #default>
        <div class="body">
            <ul>
              <li v-for="item in audioStore.songList"  :class="audioStore.playingSong && item.id === audioStore.playingSong.id ? 'is_playing' : ''" :key="item.id"  @dblclick="handleDbclick(item)">
                <div class="music_info">
                  <span class="title">{{item.title}} <PlayingIcon v-if="audioStore.playingSong && audioStore.playingSong.id === item.id && audioStore.status === PlayStatus.playing"></PlayingIcon></span>
                  <span class="artist">{{item.artist_name}}</span>
                </div>
                <div class="music_length">
                  <span class="length-text">{{SongLengthToDateString(item.length)}}</span>
                  <div class="btn-list">
                    <MusicQueteButtonList :played="!!(audioStore.status === PlayStatus.playing && audioStore.playingSong && audioStore.playingSong.id === item.id)" :song="item"></MusicQueteButtonList>
                  </div>
                </div>
              </li>
            </ul>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <!--        <el-button type="primary" @click="handelClose">confirm</el-button>-->
          <IconView text="收起" @click="handelClose">
            <template #img >
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11">
                <path fill="#333" fill-rule="evenodd" d="M12.177 7.268V5.025a4.86 4.86 0 0 1 2.013-3.927.513.513 0 0 1 .71.105.495.495 0 0 1-.106.7 3.865 3.865 0 0 0-1.6 3.122V8.67a.494.494 0 0 1-.013.11c.008.072.012.145.012.22 0 1.105-.91 2-2.032 2-1.122 0-2.032-.895-2.032-2s.91-2 2.032-2c.37 0 .717.097 1.016.268zM.5 10h6.164a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1zm0-10h12.329a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1zm0 5h8.806a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1z"/>
              </svg>
            </template>
          </IconView>
        </div>
      </template>
    </el-drawer>
</template>

<style lang="scss" scoped>

.el-drawer{
  -webkit-app-region: no-drag;
}

.body{
  display: flex;
  flex-direction: column;



  ul{
    padding:0;
    margin: 0;
  }

  .is_play .music_info .title,
  .is_playing .music_info .title,
  .is_playing .music_info .artist,
  .is_play .music_info .artist{
    color: #1ecf9d;
  }

  .is_playing{

  }


  li{
    display: flex;
    justify-content: space-between;
    padding: 14px 18px 14px 25px;
    height: 70px;

    .music_info{
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .title{
        font-size: 14px;
        color: #474747;
        display: flex;

        i{
          margin-left: 4px;
        }
      }

      .artist{
        font-size: 12px;
        color: #808080;
      }
    }

    .music_length{
      display: flex;
      align-items: center;
      position: relative;

      .btn-list{
        position: absolute;
        right: 0;
        display: none;
      }
    }

    &:hover{
      background-color: #f8f8f8;

      .btn-list{
        display: block;
      }

      .length-text{
        display: none;
      }
    }
  }
}

.el-drawer__header{
  flex-direction: column;
}

.list-info{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.drwaer_btn_list{

  i{
    &:last-child{
      margin-left: 10px;
    }
  }

}
</style>